<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>REGISTER</title>
        <link rel="stylesheet" type="text/css" href="css/common.css">
        <link rel="stylesheet" href="css/register.css">
		<!--导入jquery-->
		<script src="js/jquery-3.3.1.js"></script>
		<script>
			/*
			* 表单校验（用正则校验）：
			*     1.用户名：单词字符，长度8-20位
			*     2.密码
			*     3.email：邮件格式
			*     4.姓名：非空
			*     5.手机号：手机号格式
			*     6.出生日期：非空
			*     7.验证码：非空
			* */

			// 校验用户名
			function checkUsername(){
				// 1.获取用户名的值
				var username = $("#username").val();
				// 2.定义正则
				var reg_username = /^\w{8,20}$/; // 单词字符，长度8到20位
				// 3.判断，给出提示信息
				var flag = reg_username.test(username);
				if(flag){
					// 用户名合法
					$("#username").css("border","");
				}else{
					// 用户名非法
					$("#username").css("border","1px solid red");
				}
				return flag;
			}

			// 校验密码
			function checkPassword(){
				// 1.获取用户名的值
				var password = $("#password").val();
				// 2.定义正则
				var reg_password = /^\w{8,20}$/; // 单词字符，长度8到20位
				// 3.判断，给出提示信息
				var flag = reg_password.test(password);
				if(flag){
					// 用户名合法
					$("#password").css("border","");
				}else{
					// 用户名非法
					$("#password").css("border","1px solid red");
				}
				return flag;
			}

			// 校验邮箱
			function checkEmail(){
				// 1.获取用户名的值
				var email = $("#email").val();
				// 2.定义正则  itcast@163.com 843296031@qq.com
				var reg_email = /^\w+@\w+\.\w+$/; //
				// 3.判断，给出提示信息
				var flag = reg_email.test(email);
				if(flag){
					// 用户名合法
					$("#email").css("border","");
				}else{
					// 用户名非法
					$("#email").css("border","1px solid red");
				}
				return flag;
			}



			// 校验手机号
			function checkTelephone(){
				// 1.获取手机号的值
				var telephone = $("#telephone").val();
				// 2.定义正则  13207168553
				var reg_telephone = /^1[3-9]\d{9}$/; //
				// 3.判断，给出提示信息
				var flag = reg_telephone.test(telephone);
				if(flag){
					// 手机号合法
					$("#telephone").css("border","");
				}else{
					// 手机号非法
					$("#telephone").css("border","1px solid red");
				}
				return flag;
			}

			function checkFirstName(){
				var fname = $("#firstname").val();
				var flag = fname.length > 0;
				if(flag){
					$("#firstname").css("border","");
				}else{
					$("#firstname").css("border","");
				}
				return flag;
			}

			function checkLastName(){
				var fname = $("#lastname").val();
				var flag = fname.length > 0;
				if(flag){
					$("#lastname").css("border","");
				}else{
					$("#lastname").css("border","");
				}
				return flag;
			}

			function checkTelephone(){
				// 1.获取手机号的值
				var telephone = $("#telephone").val();
				// 2.定义正则  13207168553
				var reg_telephone = /^1[3-9]\d{9}$/; //
				// 3.判断，给出提示信息
				var flag = reg_telephone.test(telephone);
				if(flag){
					// 手机号合法
					$("#telephone").css("border","");
				}else{
					// 手机号非法
					$("#telephone").css("border","1px solid red");
				}
				return flag;
			}

			// 校验验证码
			function checkCheck(){
				// 1.获取验证码的值
				var check = $("#check").val();
				// 2.定义正则
				var reg_check = /^[0-9A-Za-z]{4}$/; //
				// 3.判断，给出提示信息
				var flag = reg_check.test(check);
				if(flag){
					// 验证码合法
					$("#check").css("border","");
				}else{
					// 验证码非法
					$("#check").css("border","1px solid red");
				}
				return flag;
			}

			$(function(){
				// 当表单提交时，调用所有的校验方法
				// $("#registerForm").submit(function(){
				$("#abc").click(function(){
					// 1.发送数据到服务器
					if(checkUsername() && checkPassword()&& checkEmail() && checkFirstName && checkLastName()){
						// 校验通过，发送Ajax请求，提交表单的数据  username=zhangsan&password=123

						$.post("user/regist",$("#registerForm").serialize(),function(data){
							// 处理服务器响应的数据  data   {flag:true,errorMsg:"注册失败"}
							console.log(data);
							if(data.flag){
								// 注册成功，跳转成功页面
								location.href = "register_ok.html";
							}else{

								// 注册失败,给errorMsg添加提示信息
								$("#errorMsg").html(data.errorMsg);
							}
						});
					}

					// 2.不让页面跳转
					return false;
					// 如果匿名的function方法没有返回值或者返回位true，则表单提交，如果返回位false，则表单不提交
				});

				// 当某一个组件失去焦点时，调用对应的校验方法
				$("#username").blur(checkUsername);
				$("#password").blur(checkPassword);
				$("#email").blur(checkEmail);
				$("#telephone").blur(checkTelephone);
				$("#check").blur(checkCheck);
				$("#firstname").blur(checkFirstName());
				$("#lastname").blur(checkLastName());
			});



		</script>
    </head>
	<body>
	<!--引入头部-->
	<div id="header"></div>
        <!-- 头部 end -->
    	<div class="rg_layout">
    		<div class="rg_form clearfix">
    			<div class="rg_form_left">
    				<p>NEW USER</p>
    				<p>REGISTER</p>
    			</div>
    			<div class="rg_form_center">
					<div id="errorMsg" style="color: red;text-align: center"></div>
					<!--注册表单-->
    				<form id="registerForm" action="user">
						<!--提交处理请求的标识符-->
						<input type="hidden" name="action" value="register">
    					<table style="margin-top: 25px;">
    						<tr>
    							<td class="td_left">
    								<label for="username">Username</label>
    							</td>
    							<td class="td_right">
    								<input type="text" id="username" name="username" placeholder="Enter">
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left">
    								<label for="password">Password</label>
    							</td>
    							<td class="td_right">
    								<input type="password" id="password" name="password" placeholder="Enter your password">
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left">
    								<label for="email">Email</label>
    							</td>
    							<td class="td_right">
    								<input type="text" id="email" name="email" placeholder="Enter your Email">
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left">
    								<label for="lastname">Last Name</label>
    							</td>
    							<td class="td_right">
    								<input type="text" id="lastname" name="lastname" placeholder="Enter your Last Name">
    							</td>
    						</tr>
							<tr>
								<td class="td_left">
									<label for="firstname">First Name</label>
								</td>
								<td class="td_right">
									<input type="text" id="firstname" name="firstname" placeholder="Enter your First Name">
								</td>
							</tr>
    						<tr>
    							<td class="td_left">
    								<label for="telephone">Phone Number</label>
    							</td>
    							<td class="td_right">
    								<input type="text" id="telephone" name="telephone" placeholder="Enter your phone">
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left">
    								<label for="sex">Sex</label>
    							</td>
    							<td class="td_right gender">
    								<input type="radio" id="sex" name="sex" value="M" checked> Male
    								<input type="radio" name="sex" value="F"> Female
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left">
    								<label for="check">Verification Code</label>
    							</td>
    							<td class="td_right check">
    								<input type="text" id="check" name="check" class="check">
    								<img src="checkCode" height="32px" alt="" onclick="changeCheckCode(this)">
									<script type="text/javascript">
										//图片点击事件
										function changeCheckCode(img) {
											img.src="checkCode?"+new Date().getTime();
                                        }
									</script>
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left"> 
    							</td>
    							<td class="td_right check"> 
    								<input id="abc" type="submit" class="submit" value="Register">
									<span id="msg" style="color: red;"></span>
    							</td>
    						</tr>
    					</table>
    				</form>
    			</div>
    			<div class="rg_form_right">
    				<p>
    					<a href="login.html">SIGN IN</a>
    				</p>
    			</div>
    		</div>
    	</div>
        <!--引入尾部-->
    	<div id="footer"></div>
		<!--导入布局js，共享header和footer-->
		<script type="text/javascript" src="js/include_without_toolbar.js"></script>
    	
    </body>
</html>